<template>
	<view>
		<u-navbar :is-back="true" title="搜索 " :border-bottom="false"  ></u-navbar>
		<view class="cu-bar search bg-white no-shadow">
				<view class="search-form round">
					<text class="cuIcon-search"/>
					<input v-model="searchKey" :adjust-position="false" type="text" placeholder="" confirm-type="search"/>
					<text class="cuIcon-close close-icon" v-if="searchKey.length>0" @tap="closeInput"/>
				</view>
				<view class="action" @click="handleSearch">
					<text class="text-red">搜索</text>
				</view>
			</view>
		<!--搜索区域-->
		<view class="padding zaiui-search-list-view">
			
			<view class="zaiui-seat-height"/>
			<!--搜索记录-->
			<view class="search-list-view">
				<view class="search-bar-view">
					<text class="text-black">历史搜索</text>
					<text class="cuIcon-delete text-gray icon-right" @tap="deleteTap"/>
				</view>
				<view class="btn-view">
					<button class="cu-btn round"  @click="handleRedirect(item)" v-for="(item,index) in history_keyword_list" :key="index">{{item.name}}</button>
				</view>
			</view>
			
			<!--推荐搜索-->
			<view class="search-list-view">
				<view class="search-bar-view">
					<text class="text-black">推荐搜索</text>
				</view>
				<view class="btn-view">
					<button @click="handleRedirect(item)" class="cu-btn round" v-for="(item,index) in hot_key" :key="index">{{item.name}}</button>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
export default {
    data() {
        return {
            hot_key:[],
            search_close: false, 
            searchKey: '', 
            deleteView: false,
            storage_index:0,
        }
    },
    computed:{
        history_keyword_list(){
            this.storage_index
            return this.getStorageKeywords()||[]
        }
    },
    onLoad() {
        this._initData()
    },
    onReady() {
        uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
        });
    },
    methods: {
			
        _initData(){
			this.$u.http.post('/api/index/defInfo',{
				type:'search_keyword'
			}).then(({data={}})=>{
				const hot_key = (data.hot_key||[]).map(function(item){
					return {name:item}
				})
                this.hot_key = hot_key
            })
        },
			
        BackPage() {
            uni.navigateBack();
        },
        getStorageKeywords(){
            let data = uni.getStorageSync('search_key')||[];
            return data
        },
        setStorageKeywords(item){
            this.storage_index++
            let data = this.getStorageKeywords();
            data.unshift(item);
            let history_record_arr = [];
            let history_data = []
            data.map(function(item,index){
                if(history_record_arr.indexOf(item.name)>-1){
						
                }else{
                    history_record_arr.push(item.name)
                    history_data.push(item)
                }
					
            })
            if(history_data.length>10){
                history_data.pop()
            }
            uni.setStorageSync('search_key',history_data);
        },
        handleRedirect(item){
				
            //获取缓存数据
            if(item.name){
                this.setStorageKeywords(item)
            }
            this.searchKey = item.name
            uni.navigateTo({
                url:'/pages/index/more?title=搜索结果&keyword='+item.name,
            })
				
        },
        handleSearch(){
            this.handleRedirect({name:this.searchKey})
        },
        closeInput() {
            this.searchKey = '';
            this.search_close = false;
        },
        deleteTap() {
            let that = this
            uni.showModal({
                title: '提示',
                content: '是否删除历史记录',
                success: function (res) {
                    if (res.confirm) {
                        uni.removeStorageSync('search_key');
                        that.storage_index++
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            })
        },
        logTap() {
            this.deleteView = false;
        },
    }
}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.zaiui-bar-search-title-box {
		.cu-bar {
			padding-top: calc(var(--status-bar-height)+30rpx);
			min-height: calc(var(--status-bar-height) + 101rpx);
			.content {
				top: var(--status-bar-height);
				width: calc(100% - 181.81rpx);
			}
			.search-form [class*="cuIcon-"] {
			    margin: 0 0.8em 0 0.8em;
			}
			.search-form {
				/* #ifdef MP */
				margin-right: 181.81rpx;
				/* #endif */
				
				margin-left: 9.09rpx;
				.close-icon {
					font-size: 29.09rpx;	
				}
			}
		}
		.cu-bar.fixed.no-shadow {
			box-shadow: inherit;
		}
		.cu-bar.bg-white {
			color: #333333;
		}
		.zaiui-seat-height {
			width: 100%;
			height: calc(var(--status-bar-height) + 101rpx);
		}
	}
	
	.zaiui-search-list-view {
		position: relative;
		width: 100%;
		.search-list-view {
			.search-bar-view {
				position: relative;
				margin-bottom: 18.18rpx;
				width: 100%;
				.icon-right {
				    position: absolute;
				    right: 0;
				    top: 5.45rpx;
				}
				.text-right {
					position: absolute;
					right: 0;
					top: 4rpx;
					text + text {
						margin-left: 27.27rpx;	
					}
				}
			}
			.btn-view {
				position: relative;
				padding-bottom: 36.36rpx;
			    width: 100%;
				.cu-btn {
					color: #333333;
					height: 54.54rpx;
					font-size: 23.63rpx;
					margin-right: 27.27rpx;
					margin-bottom: 18.18rpx;
					.close-icon {
						top: 0;
						color: #9c9797;
						right: -9.09rpx;
					    position: absolute;
					    font-size: 27.27rpx;
					}
				}
			}
		}
	}
	
</style>